<!-- 表单验证 -->
<template>
	<view class="page-demo-form">
		<u-navbar :is-back="true" title="表单验证"></u-navbar>
		<form @submit="formSubmit">
			 
			<view class="row">
				<view class="label">姓名</view>
				<input type="text" name="name" placeholder="必填" />
			</view> 
			<view class="row">
				<view class="label">手机号</view>
				<!-- 手机号、身份证必须限制最长输入限制 -->
				<input type="number" name="mobile" placeholder="11位手机号" maxlength="11" />
			</view> 
			<view class="row">
				<view class="label">身份证</view>
				<input type="text" name="idcard" placeholder="必填" />
			</view> 
			<view class="row">
				<view class="label">邮箱</view>
				<input type="text" name="email" placeholder="必填" />
			</view> 
			<view class="row">
				<view class="label">用户名</view>
				<input type="text" name="username" placeholder="必填" />
			</view> 
			<view class="row">
				<view class="label">密码</view>
				<input type="text" name="password" placeholder="必填" />
			</view> 
			<view class="row">
				<view class="label">非空必填</view>
				<input type="text" name="require" placeholder="必填" />
			</view>
			<view class="row">
			 	<view class="label">数字范围</view>
			 	<input type="text" name="range" placeholder="必填" />
			 </view>
			<view class="row">
			  	<view class="label">整数</view>
			  	<input type="text" name="int" placeholder="必填" />
			</view>
			<view class="row">
			 	<view class="label">字符串长度</view>
			 	<input type="text" name="slength" placeholder="必填" />
			 </view>
			<button form-type="submit" class="btn-main">提交</button>
		</form>
	</view> 
</template>

<script>
export default {
	data() {
		return { 
			options:{}
		}
	}, 
	onLoad(options) {
		this.options=options;
	},
	onShareAppMessage(res){
		return {
			title: '',
			path:"/pages/index/index"
		}
	},
	onShow(){},
	onReachBottom(){},
	onHide(){}, 
	onReady(){},
	methods: {
		formSubmit:function(e){
			var datas=e.detail.value;
			//表单验证 ， 更多验证看function.js
			var msg=this.$func.validate(this,[ 
				["姓名",datas.name,'chinese'],//length验证长度 
				['手机号',datas.mobile,'mobile'],//手机号验证
				['身份证',datas.idcard,'idcard'],//身份证验证
				['邮箱',datas.email,'email'],//邮箱验证
				["备注",datas.require,'require'], //验证必填
				["用户名",datas.username,'username'], //用户名
				["密码",datas.password,'password'], //密码
				["年龄",datas.range,'range',[1,100]], //数字范围
				["爱好",datas.slength,'length',[1,10]], //数字范围
				["性别",datas.slength,'index',["1","2"]], //indexOf验证，字符串数组，区分大小写
			]);
			console.log("表单数据",datas)
			if(msg!==true){
				this.$toast(msg);
				return false;
			} 
			this.$showLoading("保存中"); //避免表单重复提交
			 
			//发送请求 
			var _this=this;
			this.$api.request("/api/user/update",{  
				data:datas
			}).then((res)=>{
				if(res.code==200){
					
				} 
			}).catch((err)=>{
				console.log("错误:",err);
			})
			
		}
	}
}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.page-demo-form{ 
		.row{
			width: calc(100% - 60upx);
			margin:20upx 30upx;
		}
		input{
			height: 80upx;
			line-height: 80upx;
			width:100%;
			margin:20upx 0upx;
			border:1upx solid #e1e1e1;
			padding:0upx 20upx;
		}
		.btn-main{
			width:calc(100% - 60upx);
			margin:80upx auto;
		}
	}
</style>
